<template>
  <div style="width: 100%">
      <el-row class="searchrow">
   <el-col class="searchbox">
     <el-tabs v-model="activeName"  @tab-click="handleClick">
       <el-tab-pane label="个人查询" name="first">
         <div style="height: 400px">
           <div style="padding-top: 20px;width: 60%;margin-left: 20%">
             <el-form ref="form" :model="personform" size="normal">
               <el-form-item  prop="name">
                 <el-input v-model="personform.name"
                           clearable
                           size="large"
                           placeholder="请输入待查找的姓名"
                 ></el-input>
               </el-form-item>
               <el-form-item  prop="id">
                 <el-input v-model="personform.id"
                           clearable
                           size="large"
                           placeholder="请输入待查找的身份证号码"
                 ></el-input>
               </el-form-item>
               <el-form-item prop="op">
                 <el-select v-model="personform.op"
                            placeholder="请选择一个交易场景" size="large"
                            style="width: 100%"
                 >
                   <el-option
                       v-for="item in options"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value"
                   />
                 </el-select>
               </el-form-item>
               <el-button style="width: 100%" type="primary" @click="search_person">查 询</el-button>
             </el-form>
           </div>
         </div>
       </el-tab-pane>
       <el-tab-pane label="企业查询" name="second">
         <div style="height: 400px">
           <div style="padding-top: 20px;width: 60%;margin-left: 20%">
             <el-form ref="form" :model="personform" size="normal">
               <el-form-item  prop="id">
                 <el-input v-model="personform.id"
                           clearable
                           size="large"
                           placeholder="请输入待查找的企业名称，统一社会信用代码或注册号"
                 ></el-input>
               </el-form-item>
               <el-form-item prop="op">
                 <el-select v-model="personform.op"
                            placeholder="请选择一个交易场景" size="large"
                            style="width: 100%"
                 >
                   <el-option
                       v-for="item in options"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value"
                   />
                 </el-select>
               </el-form-item>
               <el-button style="width: 100%" type="primary" @click="search_company">查 询</el-button>
             </el-form>
           </div>
         </div>
       </el-tab-pane>
     </el-tabs>
   </el-col>
 </el-row>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  name: "SearchPage",
  data() {
    return {
      activeName: 'first',
      activeName2:'',
      endactiveIndex:0,
      personform:{},
      options:[
        {
          value: '1',
          label: '租借小型物品',
        },
        {
          value: '2',
          label: '银行贷款',
        },
      ],
      showpolicy:false,
      showmodle:false,
      policydata:[
        {
          picurl:'https://i.postimg.cc/mD53036s/wlop-3se.jpg',
          title:'233333',
          time:'2022/3/22',
          type:'政策'
        },
        {
          picurl:'https://i.postimg.cc/mD53036s/wlop-3se.jpg',
          title:'hhhh',
          time:'2022/3/22',
          type:'失信名单'
        },
      ]
    }
  },
  methods:{
    handleClick (tab, event) {
      console.log(tab, event)
    },
    search_person() {
      this.$router.push("/result")
    },
    search_company() {

    },
    sp() {
      this.showpolicy = true
      this.showmodle = false
    },
    sd() {
      this.showpolicy = false
      this.showmodle = true
    }
  }
}
</script>

<style scoped>
.searchrow {
  /*background-color: darkseagreen;*/
  margin-top: 70px;
  height: 300px;
  width: 100vw;
}

.searchbox {
  padding-left: 5%;
  padding-right: 40%;
  padding-top: 10px;
}

.showrow {
  /*background-color: fuchsia;*/
  margin-top: 34vh;
}

.policy-card {
  margin-left: 30%;
  width: 1200px;
  height: 300px;
}

.carousel-img {
  height: 200px;
  object-fit: cover;
  display: block;
  border-radius: 2%;
}
</style>